<!-- 任务执行一次弹窗 -->
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { IDbFormItem } from '@/types/global'
import DuiForm from '@/common-ui/dui-form/index.vue'
import * as taskApi from '@/api/task'
import useNotic from '@/hooks/useNotic'

const emits = defineEmits(['refresh'])

// 弹窗表单数据
const ruleFormRef = ref<InstanceType<typeof DuiForm>>()
// 表单配置
const formConfig = reactive<IDbFormItem[]>([
  { label: '任务参数', prop: 'executorParam', type: 'input' },
  { label: '机器地址', prop: 'addressList', tip: '多个地址用逗号分隔', type: 'textarea' }
])
// 表单数据
const formData = ref({ id: '', executorParam: '', addressList: '' })
// 是否显示弹窗
const showDialog = ref(false)

/**
 * 打开弹窗并初始化数据
 */
function init(id: string) {
  formData.value = { id, executorParam: '', addressList: '' }
  showDialog.value = true
}

/**
 * 点击提交
 */
function submitClick() {
  ruleFormRef.value
    ?.validate()
    .then(() => {
      taskApi.executeTaskManage(formData.value).then((res) => {
        if (res.success) {
          useNotic().success('执行成功')
          showDialog.value = false
          emits('refresh')
        }
      })
    })
    .catch(() => {})
}

defineExpose({
  init
})
</script>

<template>
  <dui-dialog v-model="showDialog" title="任务执行">
    <dui-form ref="ruleFormRef" :form-config="formConfig" :form-data="formData" />
    <template #footer>
      <el-button @click="showDialog = false">取消</el-button>
      <el-button type="primary" @click="submitClick"> 确定 </el-button>
    </template>
  </dui-dialog>
</template>
